<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script src="./js/dojo/dojo.js">
        </script>
        <script type="text/javascript">
            dojo.addOnLoad(function(){
            
                var typeOfById = typeof dojo.byId('toDelete');
                var typeOfByQuery = typeof dojo.query('#toDelete');
                
                console.log(dojo.byId('toDelete'));
                //console.log( typeOfById );
                //console.log( typeOfByQuery);
                
                var list = dojo.query('div');
                
                dojo.forEach(list, function(entry, i){
                
                    //console.log( entry );		
                
                
                });
                
                dojo.query('div').forEach(function(entry){
                    console.log(entry);
                    
                });
                
                
                var typeList = dojo.query('div[type=cusTypeI]');
                
                dojo.forEach(typeList, function(entry, i){
                
                    console.log(i + ':' + entry.id);
                    
                });
                
                /**
                 * check whether there is any one equal some condition
                 */
                var someList = dojo.some(typeList, function(entry, i){
                    if (dojo.attr(entry, 'value') == 2000) {
                        console.log('found one 2000: ' + i + ':' + entry.id);
                    }
                    return dojo.attr(entry, 'value') == 2000;
                })
                
                console.log(someList);
                
                /**
                 * check whether there are every one equal some condition
                 */
                var everyLargeThan2000 = dojo.every(typeList, function(entry, i){
                    return dojo.attr(entry, 'value') > 2000;
                });
                console.log(everyLargeThan2000);
                
                var filterList = dojo.filter(typeList, function(entry){
                    return dojo.attr(entry, 'value') == 3000;
                });
                console.log(filterList);
                
                var mapList = dojo.map(typeList, function(entry){
                
                    //console.log(entry);
                    //				dojo.attr(entry, {value:dojo.attr(entry, 'value') * 2})
                    dojo.attr(entry, {
                        value: 2000
                    })
                    return dojo.attr(entry, 'value');
                });
                
                console.log(mapList);
                dojo.query('div[type=cusTypeI]').forEach(function(entry){
                
                    var innerSpan = dojo.create('span');
                    dojo.attr(innerSpan, {
                        class: "textClass",
                        type: 'cusTypeI',
                        value: 'text Value'
                    });
                    
                    entry.appendChild(innerSpan);
                    /**
                     * if we dont clone one, and use the same obj place to another place,
                     * the previous placed html tag will be removed
                     */
                    var innerSpanClone = dojo.clone(innerSpan);
                    dojo.attr(innerSpanClone, {
                        class: 'textClassClone'
                    });
                    
                    dojo.place(innerSpanClone, entry, 'last');
                    console.log(entry);
                });
                
                /**
                 * place html string
                 */
                dojo.place('<p class="hardCodeHtmlClass">html hard code place</p>', 'toPlace', 'first');
                
                
            });
            
            /**
             * compare empty and destroy
             * usage:
             *	empty, destroy , parameter can be id or noDe
             *
             * Node can get by query().at(0)[0];
             *
             *
             */
            dojo.ready(function(){
            
				console.log('doc ready');
                var length = dojo.query('div').length;
                console.log(length);
                console.log(dojo.query('div')[length - 1]);
                dojo.empty(dojo.byId('toEmpty'));
                dojo.destroy(dojo.byId('toDestroy'));
                
                console.log(typeof dojo.byId('notexists'));
                console.log(typeof dojo.query('#notexists'));
                
                var objNotExists = dojo.byId('notExists');
                
                var numberProperties = 0;
                for (var i in objNotExists) {
                    numberProperties++;
                    console.log(objNOtExists[i]);
                }
                
                console.log(numberProperties);
                if (objNotExists == {}) {
                    console.log('fuck ');
                }
                
                dojo.destroy('toDestroy');
                
                
                
                console.log('begin iterate domNode');
                var objById = dojo.byId('toEmpty');
                
                console.log(objById);
                var numberProperties = 0;
                for (var i in objById) {
                    numberProperties++;
                    //console.log(objById[i]);
                }
                
                console.log(numberProperties);
                
                var objByQuery = dojo.query('#toEmpty')[0];
                
                console.log(objByQuery);
                var numberProperties = 0;
                for (var i in objByQuery) {
                    numberProperties++;
                    //console.log(objByQuery[i]);
                }
                
                console.log(numberProperties);
                
            });
            
            
            
            
        </script>
    </head>
    <body>
        <div id="container">
            <div id="toDelete">
                fdsaf sdaf
            </div>
            <div id="toDestroy">
                To destroy
            </div>
            <div id="toEmpty">
                To empty
                <div class="nestedClass">
                    nested div text
                </div>
            </div>
            <div id="toPlace">
                <span>span text</span>
            </div>
            <div id="one" type="cusTypeI" value="2000">
            </div>
            <div id="two" type="cusTypeI" value="500">
            </div>
            <div id="three" type="cusTypeI" value="1000">
            </div>
            <div id="four" type="cusTypeI" value="3000">
            </div>
            <div id="five" type="cusTypeI" value="3000">
            </div>
        </div>
    </body>
</html>
